<template>
  <div class="flex flex-col min-h-screen">
    <!-- 固定背景视频 - 从页面顶部开始 -->
    <div class="fixed inset-0 w-full h-full z-0">
      <video 
        autoplay 
        muted 
        loop 
        playsinline
        class="absolute w-full h-full object-cover"
      >
        <source src="/videos/hero-video.mp4" type="video/mp4">
        您的浏览器不支持视频标签
      </video>
      <!-- 视频遮罩层 -->
      <div class="absolute inset-0 bg-black bg-opacity-30"></div>
    </div>
    
    <!-- 半透明导航条 - 添加滚动隐藏/显示效果 -->
    <header 
      class="sticky top-0 z-50 bg-black bg-opacity-40 backdrop-blur-sm transition-transform duration-300"
      :class="{ '-translate-y-full': hideNavbar && !atTop }"
      ref="navbar"
    >
      <div class="container py-2">
        <div class="flex items-center justify-between">
          <router-link to="/" class="flex items-center space-x-2">
            <div class="h-8 flex items-center">
              <img src="@/assets/images/logo.png" alt="Logo" class="h-10 w-auto -my-1" />
            </div>
            <span class="text-lg font-bold text-white">{{ appStore.companyName }}</span>
          </router-link>
          
          <!-- 桌面导航 -->
          <nav class="hidden md:flex items-center space-x-6">
            <a href="#hero" class="font-medium text-sm text-white hover:text-primary-light">首页</a>
            <a href="#about" class="font-medium text-sm text-white hover:text-primary-light">关于我们</a>
            <a href="#products" class="font-medium text-sm text-white hover:text-primary-light">产品介绍</a>
            <a href="#footer" class="font-medium text-sm text-white hover:text-primary-light">联系我们</a>
          </nav>
          
          <!-- 移动端菜单按钮 -->
          <button class="md:hidden text-white" @click="appStore.toggleMenu">
            <svg v-if="!appStore.isMenuOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
      
      <!-- 移动端导航菜单 -->
      <div v-if="appStore.isMenuOpen" class="md:hidden bg-black bg-opacity-90">
        <div class="container py-3">
          <nav class="flex flex-col space-y-3">
            <a href="#hero" class="font-medium text-sm text-white" @click="appStore.closeMenu">首页</a>
            <a href="#about" class="font-medium text-sm text-white" @click="appStore.closeMenu">关于我们</a>
            <a href="#products" class="font-medium text-sm text-white" @click="appStore.closeMenu">产品介绍</a>
            <a href="#footer" class="font-medium text-sm text-white" @click="appStore.closeMenu">联系我们</a>
          </nav>
        </div>
      </div>
    </header>
    
    <main class="flex-grow relative z-10">
      <!-- 视频背景英雄区域 -->
      <section id="hero" class="hero-section relative h-screen overflow-hidden">
        <!-- 英雄区域内容 -->
        <div class="container relative z-10 h-full flex items-center">
          <div class="max-w-2xl">
            <h1 class="text-white text-4xl md:text-5xl font-bold mb-6 animate-fade-in">创新科技，连接未来</h1>
            <p class="text-white text-lg md:text-xl animate-fade-in animation-delay-300">
              辰晓集团是一家全球领先的科技企业，致力于通过创新技术解决方案，为客户创造价值，推动发展。
            </p>
          </div>
        </div>
        
        <!-- 向下滚动提示 -->
        <div class="absolute bottom-8 left-0 right-0 flex justify-center z-10 animate-bounce">
          <a href="#about" class="text-white flex flex-col items-center">
            <span class="mb-2">向下滚动</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
          </a>
        </div>
      </section>
        
        <!-- 关于我们 - 完全覆盖视频背景 -->
        <section id="about" class="section bg-white relative z-20 min-h-screen w-full">
          <div class="absolute inset-0 bg-white"></div>
          <div class="container relative z-10 py-20">
            <div class="section-title text-center mb-12">
              <h2 class="text-3xl font-bold mb-4">关于我们</h2>
              <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
                辰晓集团成立于2010年，是一家专注于创新的技术企业。
              </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
              <div>
                <p class="text-gray-600 mb-6">
                  辰晓集团是一家全球领先的科技企业，致力于通过创新技术解决方案，为客户创造价值，推动发展。我们的业务涵盖人工智能、云计算、大数据、物联网等多个领域。
                </p>
                <p class="text-gray-600 mb-6">
                  经过多年的发展，我们已经成为行业内的佼佼者，拥有一支高素质的专业团队和丰富的项目经验。我们始终坚持"创新驱动、客户至上"的理念，不断推动创新技术和产品升级。
                </p>
              </div>
              <div class="rounded-lg overflow-hidden shadow-xl">
                <img src="../assets/images/about-we.jpg" alt="关于辰晓" class="w-full h-auto" />
              </div>
            </div>
          </div>
        </section>
      
        <!-- 产品介绍模块 -->
        <section id="products" class="section bg-gray-50 relative z-20 py-20 w-full">
          <div class="container relative z-10">
            <div class="section-title text-center mb-16">
              <h2 class="text-3xl font-bold mb-4">产品介绍</h2>
              <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
                我们提供多种创新产品，满足不同行业和场景的需求
              </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <!-- 产品1 - 辰晓AI智能助手 -->
              <div class="group relative">
                <div class="relative bg-white rounded-lg overflow-hidden shadow-lg border border-gray-100 transition-all duration-500 hover:shadow-xl hover:border-blue-500 h-[320px]">
                  <!-- 背景动画效果 -->
                  <div class="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  
                  <!-- 图标和内容 -->
                  <div class="relative z-10 h-full flex flex-col items-center justify-center p-6 text-center">
                    <div class="w-16 h-16 rounded-full bg-blue-500/20 flex items-center justify-center mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                      </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2 transition-transform duration-500 group-hover:translate-y-2">辰晓AI</h3>
                    <p class="text-gray-600 text-sm transition-all duration-500 group-hover:opacity-0 group-hover:translate-y-8">
                      探索AI的无限可能，让智能科技为您的生活和工作带来革命性的改变
                    </p>
                    
                    <!-- 悬浮时显示的按钮 -->
                    <div class="absolute bottom-6 left-0 right-0 text-center opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
                      <a href="http://localhost:3001" target="_blank" class="inline-block px-6 py-2.5 bg-blue-500 text-white rounded-full text-sm font-medium shadow-md hover:shadow-lg">
                        了解详情
                      </a>
                    </div>
                  </div>
                  
                  <!-- 悬浮时的粒子效果 -->
                  <div class="absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
                    <div class="absolute w-20 h-20 rounded-full bg-blue-500/10 -top-10 -left-10 animate-float-slow"></div>
                    <div class="absolute w-16 h-16 rounded-full bg-blue-500/10 bottom-10 right-10 animate-float-medium"></div>
                    <div class="absolute w-12 h-12 rounded-full bg-blue-500/10 bottom-20 left-20 animate-float-fast"></div>
                  </div>
                </div>
              </div>
              <!-- 产品2 - AI数据分析 -->
              <router-link to="/products/ai-analytics" class="group">
                <div class="relative bg-white rounded-lg overflow-hidden shadow-lg border border-gray-100 transition-all duration-500 hover:shadow-xl hover:border-purple-500 h-[320px]">
                  <!-- 背景动画效果 -->
                  <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  
                  <!-- 图标和内容 -->
                  <div class="relative z-10 h-full flex flex-col items-center justify-center p-6 text-center">
                    <div class="w-16 h-16 rounded-full bg-purple-500/20 flex items-center justify-center mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                      </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2 transition-transform duration-500 group-hover:translate-y-2">AI数据分析</h3>
                    <p class="text-gray-600 text-sm transition-all duration-500 group-hover:opacity-0 group-hover:translate-y-8">
                      智能数据分析平台，帮助企业从海量数据中挖掘价值
                    </p>
                    
                    <!-- 悬浮时显示的按钮 -->
                    <div class="absolute bottom-6 left-0 right-0 text-center opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
                      <span class="inline-block px-6 py-2.5 bg-purple-500 text-white rounded-full text-sm font-medium shadow-md hover:shadow-lg">
                        了解详情
                      </span>
                    </div>
                  </div>
                  
                  <!-- 悬浮时的粒子效果 -->
                  <div class="absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
                    <div class="absolute w-20 h-20 rounded-full bg-purple-500/10 -top-10 -left-10 animate-float-slow"></div>
                    <div class="absolute w-16 h-16 rounded-full bg-purple-500/10 bottom-10 right-10 animate-float-medium"></div>
                    <div class="absolute w-12 h-12 rounded-full bg-purple-500/10 bottom-20 left-20 animate-float-fast"></div>
                  </div>
                </div>
              </router-link>

              <!-- 产品3 - 物联网解决方案 -->
              <router-link to="/products/iot-solutions" class="group">
                <div class="relative bg-white rounded-lg overflow-hidden shadow-lg border border-gray-100 transition-all duration-500 hover:shadow-xl hover:border-green-500 h-[320px]">
                  <!-- 背景动画效果 -->
                  <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  
                  <!-- 图标和内容 -->
                  <div class="relative z-10 h-full flex flex-col items-center justify-center p-6 text-center">
                    <div class="w-16 h-16 rounded-full bg-green-500/20 flex items-center justify-center mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                      </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2 transition-transform duration-500 group-hover:translate-y-2">物联网解决方案</h3>
                    <p class="text-gray-600 text-sm transition-all duration-500 group-hover:opacity-0 group-hover:translate-y-8">
                      连接万物，智能互联，为企业打造全方位物联网生态系统
                    </p>
                    
                    <!-- 悬浮时显示的按钮 -->
                    <div class="absolute bottom-6 left-0 right-0 text-center opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
                      <span class="inline-block px-6 py-2.5 bg-green-500 text-white rounded-full text-sm font-medium shadow-md hover:shadow-lg">
                        了解详情
                      </span>
                    </div>
                  </div>
                  
                  <!-- 悬浮时的粒子效果 -->
                  <div class="absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
                    <div class="absolute w-20 h-20 rounded-full bg-green-500/10 -top-10 -left-10 animate-float-slow"></div>
                    <div class="absolute w-16 h-16 rounded-full bg-green-500/10 bottom-10 right-10 animate-float-medium"></div>
                    <div class="absolute w-12 h-12 rounded-full bg-green-500/10 bottom-20 left-20 animate-float-fast"></div>
                  </div>
                </div>
              </router-link>

              <!-- 产品4 - 安全防护系统 -->
              <router-link to="/products/security-system" class="group">
                <div class="relative bg-white rounded-lg overflow-hidden shadow-lg border border-gray-100 transition-all duration-500 hover:shadow-xl hover:border-amber-500 h-[320px]">
                  <!-- 背景动画效果 -->
                  <div class="absolute inset-0 bg-gradient-to-br from-amber-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  
                  <!-- 图标和内容 -->
                  <div class="relative z-10 h-full flex flex-col items-center justify-center p-6 text-center">
                    <div class="w-16 h-16 rounded-full bg-amber-500/20 flex items-center justify-center mb-4 transform transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                      </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2 transition-transform duration-500 group-hover:translate-y-2">安全防护系统</h3>
                    <p class="text-gray-600 text-sm transition-all duration-500 group-hover:opacity-0 group-hover:translate-y-8">
                      全方位保障企业数据安全，防止信息泄露和网络攻击
                    </p>
                    
                    <!-- 悬浮时显示的按钮 -->
                    <div class="absolute bottom-6 left-0 right-0 text-center opacity-0 transform translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
                      <span class="inline-block px-6 py-2.5 bg-amber-500 text-white rounded-full text-sm font-medium shadow-md hover:shadow-lg">
                        了解详情
                      </span>
                    </div>
                  </div>
                  
                  <!-- 悬浮时的粒子效果 -->
                  <div class="absolute inset-0 overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none">
                    <div class="absolute w-20 h-20 rounded-full bg-amber-500/10 -top-10 -left-10 animate-float-slow"></div>
                    <div class="absolute w-16 h-16 rounded-full bg-amber-500/10 bottom-10 right-10 animate-float-medium"></div>
                    <div class="absolute w-12 h-12 rounded-full bg-amber-500/10 bottom-20 left-20 animate-float-fast"></div>
                  </div>
                </div>
              </router-link>
            </div>
          </div>
        </section>
      
      <!-- 内容区域开始 -->
      <div id="content" class="content-wrapper relative z-10 bg-white">
        <!-- 波浪形状过渡 -->
        <div class="wave-transition">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="w-full h-auto translate-y-1">
            <path fill="#ffffff" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,149.3C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
          </svg>
        </div>
        
        <!-- 其他部分保持不变 -->
        <!-- ... 保留原有内容 ... -->
      </div>
    </main>
      <!-- 内容区域开始 -->
      </div>
    
    <footer id="footer" class="relative z-10">
      <div class="container py-4">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <!-- 快速链接 -->
          <div>
            <h3 class="text-sm font-medium mb-2 text-white/80">快速链接</h3>
            <ul class="space-y-1">
              <li><a href="#hero" class="text-xs text-white/60 hover:text-white transition-colors">首页</a></li>
              <li><a href="#about" class="text-xs text-white/60 hover:text-white transition-colors">关于我们</a></li>
              <li><a href="#products" class="text-xs text-white/60 hover:text-white transition-colors">产品介绍</a></li>
              <li><a href="#footer" class="text-xs text-white/60 hover:text-white transition-colors">联系我们</a></li>
            </ul>
          </div>
          
          <!-- 产品服务 -->
          <div>
            <h3 class="text-sm font-medium mb-2 text-white/80">产品服务</h3>
            <ul class="space-y-1">
              <li><router-link to="/products/cloud-platform" class="text-xs text-white/60 hover:text-white transition-colors">智能云平台</router-link></li>
              <li><router-link to="/products/ai-analytics" class="text-xs text-white/60 hover:text-white transition-colors">AI数据分析</router-link></li>
              <li><router-link to="/products/iot-solutions" class="text-xs text-white/60 hover:text-white transition-colors">物联网解决方案</router-link></li>
              <li><router-link to="/products/security-system" class="text-xs text-white/60 hover:text-white transition-colors">安全防护系统</router-link></li>
            </ul>
          </div>
          
          <!-- 联系方式 -->
          <div>
            <h3 class="text-sm font-medium mb-2 text-white/80">联系方式</h3>
            <ul class="space-y-1">
              <li class="flex items-center text-xs text-white/60">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1.5 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                <span>成都市高新区</span>
              </li>
              <li class="flex items-center text-xs text-white/60">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1.5 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                </svg>
                <span>18209368914</span>
              </li>
              <li class="flex items-center text-xs text-white/60">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1.5 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                </svg>
                <span>961519171@qq.com</span>
              </li>
            </ul>
          </div>
        </div>
        
        <div class="mt-4 pt-3 border-t border-white/10 text-center text-[10px] text-white/40">
          <p>© {{ new Date().getFullYear() }} 辰晓科技集团有限公司. 保留所有权利.</p>
        </div>
      </div>
    </footer>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores';
import { ref, onMounted, onUnmounted } from 'vue';

const appStore = useAppStore();
const navbar = ref(null);
const hideNavbar = ref(false);
const atTop = ref(true);
const lastScrollY = ref(0);
const heroSectionHeight = ref(0);

// 处理滚动事件
const handleScroll = () => {
  const currentScrollY = window.scrollY;
  
  // 判断是否在页面顶部
  atTop.value = currentScrollY <= 10;
  
  // 判断是否超过了视频区域
  const pastHeroSection = currentScrollY > heroSectionHeight.value;
  
  // 向下滚动且不在顶部时隐藏导航栏
  if (currentScrollY > lastScrollY.value && !atTop.value && pastHeroSection) {
    hideNavbar.value = true;
  } 
  // 向上滚动时显示导航栏
  else if (currentScrollY < lastScrollY.value) {
    hideNavbar.value = false;
  }
  
  lastScrollY.value = currentScrollY;
};

onMounted(() => {
  // 获取英雄区域高度
  const heroSection = document.querySelector('.hero-section');
  if (heroSection) {
    heroSectionHeight.value = heroSection.clientHeight;
  }
  
  // 添加滚动事件监听
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  // 移除滚动事件监听
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
/* 基础样式保持不变 */
.hero-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
  padding-top: 0;
}

/* 动画效果保持不变 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

.animation-delay-300 {
  animation-delay: 0.3s;
}

/* 产品卡片悬停效果 - 修复版 */
.group:hover .group-hover\:opacity-0 {
  opacity: 0 !important;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1 !important;
}

.group:hover .group-hover\:translate-y-0 {
  transform: translateY(0) !important;
}

.group:hover .group-hover\:translate-y-2 {
  transform: translateY(0.5rem) !important;
}

.group:hover .group-hover\:scale-110 {
  transform: scale(1.1) !important;
}

.group:hover .group-hover\:rotate-3 {
  transform: rotate(3deg) !important;
}

/* 浮动动画 */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-15px) rotate(-5deg); }
}

@keyframes float-fast {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(10deg); }
}

.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
}

.animate-float-medium {
  animation: float-medium 6s ease-in-out infinite;
}

.animate-float-fast {
  animation: float-fast 4s ease-in-out infinite;
}

/* 其他样式保持不变 */
/* ... 保留原有内容 ... */
</style>